<template>
    <div class="crumbs" :class="`mode-${themeMode}`">
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <transition-group name="slide-fade">
                <el-breadcrumb-item 
                    v-for="(item, index) in crumbs"
                    :key="index">
                    <router-link 
                        v-if="(index < crumbs.length - 1 && item.type != 'layout')" 
                        :to="{ path: item.path }">{{item.title}}</router-link>
                    <span v-else>{{item.title}}</span>
                </el-breadcrumb-item>
            </transition-group>
        </el-breadcrumb>
    </div>
</template>

<script>
import { mapState } from 'vuex';

export default {
    data() {
        return {

        }
    },
    computed: {
        ...mapState({
            themeMode: state => state.settings.themeMode,
        }),
        crumbs() {
            let { parent = [], title = '' } = this.$route.meta;
            parent = [...parent, {path: this.$route.path, title}].filter(v => v.type !== 'layout');
            if(!parent.find(v => v.path === '/home')) {
                parent.unshift({path: '/home', title: '首页'})
            }
            return parent
        }
    },
}
</script>

<style lang="scss" scoped>
@import '~@/assets/styles/theme-color.scss';

/* 可以设置不同的进入和离开动画 */
/* 设置持续时间和动画函数 */
.slide-fade-enter-active {
  transition: all .3s ease-out;
}
.slide-fade-leave-active {
  transition: all .3s ease-out;
}
.slide-fade-enter, .slide-fade-leave-to {
  transform: translateX(20px);
  opacity: 0;
}

.crumbs{
    padding: 12px;
    background-color: #fff;
    border-radius: 4px;
    border: 1px solid #EBEEF5;
    &.mode-dark{
        background-color: $theme-dark-color;
        border-color: $theme-dark-color;
        color: #ffffff;
        /deep/.el-breadcrumb__inner,
        .el-breadcrumb__inner.is-link, 
        .el-breadcrumb__inner a{
            color: #ffffff;
        }
    }
    &.mode-bright{
        background-color: $theme-bright-color;
        border-color: #E4E7ED;
        color: #303133;
        /deep/.el-breadcrumb__inner, 
        .el-breadcrumb__inner.is-link, 
        .el-breadcrumb__inner a{
            color: #303133;
        }
    }
    &.mode-blue{
        background-color: $theme-blue-color;
        border-color: $theme-blue-color;
        color: #ffffff;
        /deep/.el-breadcrumb__inner, 
        .el-breadcrumb__inner.is-link, 
        .el-breadcrumb__inner a{
            color: #ffffff;
        }
    }
    &.mode-lightDark{
        background-color: $theme-lightDark-color;
        border-color: $theme-lightDark-color;
        color: #ffffff;
        /deep/.el-breadcrumb__inner, 
        .el-breadcrumb__inner.is-link, 
        .el-breadcrumb__inner a{
            color: #ffffff;
        }
    }
}
</style>